<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol>
      <li tit="人之初性本善，性相近习相远。">人之初 性本善..</li>
      <li tit="锄禾日当午，汗滴禾下土。谁知盘中餐， 粒粒皆辛苦。">
        锄禾日当午..
      </li>
      <li tit="神龙教主洪福齐天、寿与天齐">神龙教主洪福齐天...</li>
    </ol>

    <div
      id="divObj"
      style="
        position: absolute;
        display: none;
        width: 200px;
        height: 40px;
        border: solid 1px green;
      "
    >
      先没有内容
    </div>
    <script>
      // 步骤1：先在页面显示有序列表
      // 步骤2：在任意位置搞一个框框，搞好样式之后，隐藏（后期通过position：absolute   相当于body  clientX clientY）
      // 步骤3：获取所有li 遍历加移动事件，
      var liObjs = document.querySelectorAll("li");
      for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onmousemove = function (e) {
          var e = e || window.event;

          // console.log(this.clientHeight) // CSS height + CSS padding

          var divObj = document.querySelector("#divObj");

          divObj.innerText = this.getAttribute("tit"); // 先获取li标签内容，放到div中
          divObj.style.display = "inline-block"; // 在显示 div
          // 设置div宽度高度
          divObj.style.left = e.clientX + "px";
          // divObj.style.top = e.clientY + 'px'  // 框框不要遮盖li标签
          divObj.style.top = e.clientY + this.clientHeight + "px";
        };

        liObjs[i].onmouseout = function () {
          var divObj = document.querySelector("#divObj");
          divObj.style.display = "none";
        };
      }
      // 步骤4：事件处理函数里面  通过事件对象获取坐标 给框框设置定位left top
      // 步骤5：移除li隐藏
    </script>
  </body>
</html>
